<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>编辑用户信息</title>
    <style>
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .upload-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body class="bg-gray-100 font-sans min-h-screen py-10 px-4">

<div class="max-w-3xl mx-auto">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <!-- 标题 -->
        <div class="p-6 border-b border-gray-200 bg-blue-50">
            <h1 class="text-2xl font-bold text-gray-800">编辑个人信息</h1>
        </div>

        <!-- 表单区域 -->
        <form id="userForm" method="post" enctype="multipart/form-data" class="p-6">
            <!-- 用户头像上传 -->
            <div class="mb-8 flex flex-col items-center">
                <div class="relative">
                    <div class="upload-loading" id="loadingIndicator">
                        <img th:src="${userInfo.image}" id="avatarPreview"
                             class="w-32 h-32 rounded-full object-cover shadow-md mb-4">
                    </div>
                    <label for="avatarUpload"
                           class="absolute bottom-0 right-0 bg-blue-500 text-white p-2 rounded-full cursor-pointer hover:bg-blue-600">
                        <i class="fas fa-camera"></i>
                    </label>
                    <input type="file" id="avatarUpload" name="image" class="hidden" accept="image/*">
                </div>
                <p class="text-sm text-gray-500 mt-2">支持 JPG/PNG 格式，大小不超过 2MB</p>
                <input type="hidden" id="avatarUrl" name="image" th:value="${userInfo.image}">
            </div>

            <!-- 用户信息表单项 -->
            <div class="grid grid-cols-1 gap-6 mb-8">
                <!-- 用户名 -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名 *</label>
                    <input type="text" id="username" name="username" required
                           th:value="${userDetails.username}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <!-- 邮箱 -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱 *</label>
                    <input type="email" id="email" name="email" required
                           th:value="${userInfo.email}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <!-- 手机号 -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码 *</label>
                    <input type="tel" id="phone" name="phone" required
                           th:value="${userInfo.phoneNumber}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>



            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end gap-4 mt-8">
                <a th:href="@{/user/userInfo}"
                   class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fas fa-times mr-2"></i>取消
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                    <i class="fas fa-save mr-2"></i>保存修改
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // 添加图片预览功能
    document.getElementById('avatarUpload').addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('avatarPreview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // 提交表单
    document.getElementById('userForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const form = this;
        const formData = new FormData(form); // 使用 FormData 提交表单数据

        try {
            const response = await fetch("/user/update", {
                method: "POST",
                body: formData // 直接使用 FormData，无需设置 Content-Type
            });

            if (response.ok) {
                const url = new URL(response.url);
                const errorParam = url.searchParams.get('error');
                if (errorParam) {
                    alert("更新失败：" + errorParam);
                } else {
                    alert("更新成功");
                    window.location.href = "/user/userInfo";
                }
            } else {
                alert("提交失败：" + response.statusText);
            }
        } catch (err) {
            console.error(err);
            alert("提交出错：" + err.message);
        }
    });
</script>

</body>
</html>